import { Component, Input } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProgressModule } from './progress.module';

@Component({
  template: `
    <div style="width: 50%">
      <lv-progress
        [lvType]="lvType"
        [lvValue]="lvValue"
        [lvStatus]="lvStatus"
        [lvWidth]="lvWidth"
        [lvSize]="lvSize"
        [lvColors]="colors"
        [lvExtra]="extraTpl"
      ></lv-progress>
      <ng-template let-data #extraTpl>
        <div
          style="display: flex;justify-content: space-between;align-content: flex-end;position: absolute;left: 0;bottom: 0.16rem;width: 100%;line-height: 0.36rem;"
        >
          <h3 style="font-size: 0.24rem; font-weight: 400">Dorado_18500_V6_03</h3>
          <span style="font-size: 0.18rem; font-weight: 700">{{ data }} %</span>
        </div>
      </ng-template>
    </div>
  `,
})
class TestProgressComponent {
  @Input() lvType: 'circle' | 'line' = 'line';
  @Input() lvValue = 40;
  @Input() lvStatus: 'normal' | 'active' | 'error' | 'success' = 'normal';
  @Input() lvWidth = 400;
  @Input() lvSize: 'small' | 'default' = 'default';
  colors = [
    [0, 'red'],
    [20, '#eb2f96'],
    [40, '#2f54eb'],
    [60, '#722ed1'],
    [80, '#13c2c2'],
    [100, '#52c41a'],
  ];
}

describe('ProgressComponent', () => {
  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [TestProgressComponent],
        imports: [ProgressModule, NoopAnimationsModule],
        teardown: { destroyAfterEach: true },
      }).compileComponents();
    })
  );

  describe('render', () => {
    let component: TestProgressComponent;
    let fixture: ComponentFixture<TestProgressComponent>;
    const renderComponent = param => {
      for (const [key, value] of Object.entries(param)) {
        component[key] = value;
      }
      fixture.detectChanges();
      expect(fixture).toMatchSnapshot();
    };

    beforeEach(() => {
      fixture = TestBed.createComponent(TestProgressComponent);
      component = fixture.componentInstance;
    });

    it('with type', fakeAsync(() => {
      renderComponent({ lvType: 'line' });
      renderComponent({ lvType: 'circle' });
    }));
    it('with value', fakeAsync(() => {
      renderComponent({ lvValue: 40 });
      renderComponent({ lvValue: 60 });
    }));
    it('with status', fakeAsync(() => {
      renderComponent({ lvStatus: 'normal' });
      renderComponent({ lvStatus: 'active' });
      renderComponent({ lvStatus: 'error' });
      renderComponent({ lvStatus: 'success' });
    }));
    it('with size', fakeAsync(() => {
      renderComponent({ lvType: 'default' });
      renderComponent({ lvType: 'small' });
    }));
  });
});
